<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>control</title>
</head>

<body>
    <a href="/config">进入配网</a><br />
    <a href="/update">进入update</a><br /><br />
    <h4 style="display:inline;">开关控制</h4><br />
    <span>状态: </span><label id="relay_state"></label><br />
    <span>控制: </span><button id="relay_open">打开</button>&nbsp;&nbsp;
    <button id="relay_close">关闭</button>&nbsp;&nbsp;
    <button id="rst">重启</button>
    <br />
    <br />
    <h4 style="display:inline;">定时开关</h4><br />
    <input type="checkbox" id="time_enable">启用</input><br />
    <input type="radio" checked="checked" name="mode_radio" onclick="mode_change(0)" /><label>每日重复</label>

    <input type="radio" name="mode_radio" onclick="mode_change(1)" /><label>循环</label>
    <input type="radio" name="mode_radio" onclick="mode_change(2)" /><label>一次倒计时关闭</label><br />
    <div name="mode_div">
        <span style="width: 40px;display:inline-block;">星期: </span>
        <span>周日</span><input name="weeks" type="checkbox"/>&nbsp;
        <span>周一</span><input name="weeks" type="checkbox"/>&nbsp;
        <span>周二</span><input name="weeks" type="checkbox"/>&nbsp;
        <span>周三</span><input name="weeks" type="checkbox"/>&nbsp;
        <br />
        <span style="width: 40px;display:inline-block;"> </span>
        <span>周四</span><input name="weeks" type="checkbox"/>&nbsp;
        <span>周五</span><input name="weeks" type="checkbox"/>&nbsp;
        <span>周六</span><input name="weeks" type="checkbox"/>&nbsp;
        <br />
        <span>开启时间：</span><input type="time" value="00:00" id="mode_1_time_start"></input><br />
        <span>关闭时间：</span><input type="time" value="00:00" id="mode_1_time_end"></input><br />
    </div>
    <div name="mode_div" style="display: none;">
        <span>开启状态时长：</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>时</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>分</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>秒</span>
        <br />
        <span>关闭状态时长：</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>时</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>分</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>秒</span>
    </div>
    <div name="mode_div" style="display: none;">
        <span>倒计时时长：</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>时</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>分</span>
        <input style="width: 50px; text-align: center;" type="number" value="0" name="time_long"><span>秒</span>
    </div><br />
    <button type="button" id="time_save">保存</button><br /> <br />
    <span>send: </span><label id="xhr_result"></label><br />
</body>
<script>
    //time格式hh:mm,需补0
    function fmt(v) {
        return v.length == 1 ? ('0' + v) : v
    }
    function mode_change(i) {
        let radios = document.getElementsByName("mode_radio")
        let divs = document.getElementsByName("mode_div")
        for (let j = 0; j < 3; j++) {
            radios[j].checked = false
            divs[j].style.display = "none"
        }
        radios[i].checked = true
        divs[i].style.display = "block"
    }
    function state_change(i) {
        let lable_state = document.getElementById("relay_state")
        if (i == 0) {
            lable_state.innerHTML = '已打开'
        } else {
            lable_state.innerHTML = '已关闭'
        }
    }
    function xhr_send(path) {
        document.getElementById("xhr_result").innerHTML = path
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("xhr_result").innerHTML += " ok";

                if (path == "/data_get") {
                    let json = JSON.parse(xhr.response)
                    document.getElementById("time_enable").checked = (json.arg0 == '0' ? true : false)
                    let choose = parseInt(json.arg1)
                    choose = (choose < 0 || choose > 2) ? 0 : choose
                    mode_change(choose)
                    //mode1
                    document.getElementById("mode_1_time_start").value = (fmt(json.arg2) + ":" + fmt(json.arg3))
                    document.getElementById("mode_1_time_end").value = (fmt(json.arg4) + ":" + fmt(json.arg5))
                    let tmp = document.getElementsByName("weeks")
                    for (let i = 0; i < tmp.length; i++) {
                        tmp[i].checked =(json['arg' + (i + 6)]=='0'?true:false)
                    }
                    //mode2 mode3
                    tmp = document.getElementsByName("time_long")
                    for (let i = 0; i < tmp.length; i++) {
                        tmp[i].value = json['arg' + (i + 13)]
                    }
                    state_change(parseInt(json.state))
                    //建立websocket连接
                    let ws = new WebSocket('ws://' + json.serverip + ":83");
                    ws.onopen = function () {
                        ws.send("ws test");
                    };

                    ws.onmessage = function (event) {
                        if (event.data == '0' || event.data == '1') {
                            state_change(parseInt(event.data))
                        }
                    };

                } else if (path == "/relay_set?value=open") {
                    state_change(0)
                } else if (path == "/relay_set?value=close") {
                    state_change(1)
                }
            } else if (xhr.readyState == 4 && xhr.status != 200) {
                document.getElementById("xhr_result").innerHTML += " err";
            }
        }
        xhr.open('GET', path)
        xhr.send()
    }
    document.getElementById("relay_open").addEventListener("click", async () => {
        xhr_send("/relay_set?value=open")
    })
    document.getElementById("relay_close").addEventListener("click", async () => {
        xhr_send("/relay_set?value=close")
    })
    document.getElementById("rst").addEventListener("click", async () => {
        xhr_send("/rst")
    })
    document.getElementById("time_save").addEventListener("click", async () => {
        let args = new Array()
        //enable
        let arg0 = document.getElementById("time_enable").checked == true ? '0' : '1'
        args.push(arg0)
        //mode choose
        let tmp = document.getElementsByName("mode_radio")
        for (let i = 0; i < tmp.length; i++) {
            if (tmp[i].checked == true) {
                args.push(i + '')
            }
        }
        //mode1
        tmp = document.getElementById("mode_1_time_start").value.split(":")
        args = args.concat(tmp)
        tmp = document.getElementById("mode_1_time_end").value.split(":")
        args = args.concat(tmp)
        tmp = document.getElementsByName("weeks")
        for (let i = 0; i < tmp.length; i++) {
            args.push(tmp[i].checked == true ? '0' : '1')
        }
        //mode2 mode3
        tmp = document.getElementsByName("time_long")
        for (let i = 0; i < tmp.length; i++) {
            args.push(tmp[i].value)
        }
        let path = "/time_task?arg0=" + args[0]
        for (let i = 1; i < args.length; i++) {
            if (parseInt(args[i]) < 0) {
                return;
            }
            path += '&arg' + i + '=' + args[i]
        }
        xhr_send(path);
    })

    xhr_send("/data_get")

</script>

</html>